<template>
  <el-card shadow="never">
    <div class="comment-card">

      <div class="comment-head">
        <a class="head f-pr">
          <img :src="changeUrlToResizeImg(comment.userVO.avatarImgUrl, 50)"
               height="50"
               width="50">
        </a>
      </div>
      <div class="comment-part">

        <div class="comment-text">
          <p class="f-brk">
            <span class="name">
              <a class="s-fc7">{{comment.userVO.nickname}}</a>
            </span>
              :
              {{comment.content}}

          </p>
        </div>

        <div class="comment-replied" v-if="comment.replyComment !== null">
          <p class="f-brk">
            <span class="name">
              <a class="s-fc7">{{comment.replyComment.userVO.nickname}}</a>
            </span>
            :
            {{comment.replyComment.content}}

          </p>
        </div>

        <div class="bottom clearfix">
          <time class="time">{{ new Date(comment.createTime).toLocaleString() }}</time>
          <div class="show-reply" >
            <!--<img src="../image/like.png" height="18px" width="18px" style="margin-right: 5px" v-if="!isLiked" @click="likeComment">-->
            <!--<img src="../image/liked.png" height="18px" width="18px" style="margin-right: 5px" v-else @click="cancelLikeComment">-->
            <el-button type="text"  class="show-reply" @click="showReplyForm = !showReplyForm">回复</el-button>
          </div>

        </div>

        <div class="form-reply" v-show="showReplyForm">
          <el-input placeholder="" v-model="inputReply" clearable class="input-reply">
          </el-input>
          <el-button type="primary" class="button-reply" @click="replyComment">回复</el-button>
        </div>

      </div>

    </div>

  </el-card>
</template>

<script>
    import {apiContext} from "../service/getData"
    import {getUser} from '../util/userUtils'

    export default {
        name: "commentCard",
        props: {
          comment: {

          }
        },
        inject: ['reload'],
        data() {
          return {

            // comment: {
            //   currentDate: "2018/7/17",
            //   userName: "小明",
            //   commentText: "你怎么这么骚"
            // },
            // commentReplied: {
            //   currentDate: "2018/7/17",
            //   userName: "小王",
            //   commentText: "秀秀秀"
            // },
            // hasReply: false,
            inputReply: "",
            showReplyForm: false,
            isLiked: false
          }
        },
        methods: {
          changeUrlToResizeImg(picUrl, size) {
            return picUrl.replace(/yunmusic_dev/, "resize_" + size + 'x' + size);
          },
          isLike() {

          },
          likeComment() {

          },
          cancelLikeComment() {

          },
          replyComment() {
            if (this.inputReply === undefined || this.inputReply.length === 0) {
              this.$message({
                message: '评论不能为空',
                type: 'info'
              });
            } else {
              let user = getUser();
              if (user === null) {
                this.$message({
                  message: '请先登录',
                  type: 'info'
                });
              } else {
                let userId = user.id;
                let userToken = user.userToken;

                this.$http.post(apiContext+"comment/publish", {
                  userId: userId,
                  targetId: this.comment.targetId,
                  replyCommentId: this.comment.id,
                  type: this.comment.type,
                  content: this.inputReply
                }, {
                  // emulateJSON : true,
                  headers: {
                    'Content-Type': 'application/json',
                    'userId': userId,
                    'userToken': userToken
                  }}).then(res => {
                  console.log(res);
                  let status = res.body.status;
                  if (status === 200) {
                    this.$message({
                      message: '评论成功',
                      type: 'success'
                    });
                    // 刷新评论
                    this.reload();
                    // getComments(1);
                  } else {
                    this.$message({
                      message: res.body.msg,
                      type: 'error'
                    });
                  }
                })
              }
            }
          }
        },
        mounted(){
          // console.log(this.comment)
        }
    }
</script>

<style scoped>
  .time {

    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 50px;
    line-height: 12px;
  }

  .show-reply {
    padding: 0;
    float: right;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .head {
    float: left;
    width: 50px;
    height: 50px;
    margin-left: 20px;
    _margin-left: 10px;
    padding: 2px;
    background: #fff;
    border: 1px solid #dadada;
  }

  .comment-part {
    flex-grow: 20
    /*margin-left: 100px;*/
  }

  .comment-head {
    flex-grow: 1
    /*width: 100px;*/
    /*height: 100px;*/
  }

  .comment-card {
    display: flex;
  }

  .comment-text {
    width: 350px;
  }

  .s-fc7, a.s-fc7:hover {
    color: #0c73c2;
  }

  .f-brk {
    word-wrap: break-word;
    white-space: normal;
    font-size: 13px;
  }

  .comment-replied {
    margin-top: 20px;
    margin-bottom: -25px;
    padding: 20px;
    border: 1px solid rgb(222, 222, 222);
    border-radius: 5px;
    background-color: rgb(244, 244, 244);

  }

  .form-reply {
    display: flex;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid rgb(222, 222, 222);
    border-radius: 5px;
    background-color: rgb(244, 244, 244);
  }

  .input-reply {

  }

  .button-reply {
    margin-left: 20px;
  }
</style>
